<template>
  <div class="customs-detail"
       :style="{height:HEIGHT+'px',paddingLeft:(WIDTH - 1024)/2+'px',paddingRight:(WIDTH - 1024)/2+'px'}">
    <!--顶部展示信息-->
    <div class="customs-search">
      <el-input placeholder="请输入国家 （回车即可搜索）" v-model="country" @keyup.enter.native="search">
        <template slot="append"><span @click="search">查 询</span></template>
      </el-input>
      <h1>海关数据最新更新时间：</h1>
    </div>
    <div class="list" :style="{maxHeight:HEIGHT-250+'px'}">
      <ul>
        <li v-for="item,index in list" :key="index">
          <!--<img :src="require(`../../../../../public/img/frags/${item.DataNameEN.split(' ')[0]}.png`)" alt="">-->
          {{item.DataNameCN}} - {{item.DataUpdate}} <a href="javascript:void(0)">更新时间：{{item.RecordTime}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import {getScrollList} from '@/api/automation/customs'

    export default {
        name: "index",
        data() {
            return {
                HEIGHT: document.documentElement.clientHeight,
                WIDTH: document.documentElement.clientWidth,
                list: [],
                old: [],
                country: ''
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            search() {
                let arr = [];
                this.old.map(item => {
                    if (item.DataNameCN.indexOf(this.country) != -1) {
                        arr.push(item)
                    }
                })
                this.list = arr;
            },
            getData() {
                getScrollList(1, '').then(res => {
                    if (res.data.success) {
                        this.list = res.data.data;
                        this.old = res.data.data;
                        console.log(this.list)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        }
    }
</script>

<style scoped lang="scss">
  .customs-detail {
    background-color: #fff;
    overflow: hidden;

    .customs-search {
      width: 1024px;
      height: 151px;
      background-color: #fff;
      margin-top: 100px;

      h1 {
        font-size: 16px;
        font-weight: normal;
        padding-top: 80px;
        color: #2A97F9;
      }

      input.el-input__inner {
        color: #232323;
      }

      span {
        cursor: pointer;
      }
    }

    .list {
      overflow: auto;

      ul {
        li {
          background-color: #fff;
          overflow: hidden;
          border-bottom: 1px solid #ddd;
          font-size: 13px;
          color: #232323;
          padding: 0 10px;
          line-height: 35px;

          img {
            width: 30px;
            height: 20px;
          }

          a {
            float: right;
          }
        }
      }
    }


  }
</style>
